/**
 * 渠道列表项
 */
import React from 'react';
import { Button, Tag } from 'antd';
import styles from './index.less';

export default function ChannelItem({ data, ...rest }) {
    const { accountDetailVOList = [], logoUrl = '', loginLink = '' } = data;
    return (
        <div className={styles.wrap} {...rest}>
            <div className={styles.contentWrap}>
                <div className={styles.contentBox}>
                    <div className={styles.logo}>
                        <img src={logoUrl} alt="logo" />
                    </div>
                    <div className={styles.content}>
                        <div className={styles.account}>
                            渠道账号：
                            {accountDetailVOList.map(item => (
                                <React.Fragment key={item.channelAccount}>
                                    {item.accountName}
                                    <Tag color={item.accountStatus === '0' ? '' : 'green'} style={{ margin: '0 8px' }}>
                                        {item.accountStatus === '0' ? '离线' : '在线'}
                                    </Tag>
                                </React.Fragment>
                            ))}
                        </div>
                    </div>
                </div>
                <div className={styles.action}>
                    <Button type="link" href={loginLink} target="_blank">
                        登录
                    </Button>
                </div>
            </div>
        </div>
    );
}
